<template>
	<view class="pro_announce">
		<view class="announce_item" v-for="(item,index) in noticeList" :key="index" @click="goToAnnounceDetails(item.id)">
			<text class="ann_it_tit">{{item.name}}</text>
			<view class="ann_it_con">{{item.content}}</view>
			<view class="ann_it_foo">
				<view class="it_foo_fl">
					<image style="background-color: #eee;" :src="item.avatar" mode=""></image>
					<text>{{item.author}}</text>
				</view>
				<text>{{item.create_time}}</text>
			</view>
		</view> 
		<view v-show="nextPage">
			<u-loadmore :status="nomore" />
		</view> 
		<view v-if="noticeList.length == 0">
			<u-empty mode="list" text="暂无公告"></u-empty>
		</view> 
	</view>
</template>

<script>
	import {
		getStorages
	} from '@/utils/storage'
	export default {
		data() {
			return {
				// 小区业主id
				propertId: null,
				// 公告列表
				noticeList: [],
				// 是否展示空提示
				ShowNoticeTit: false, 
				// 每页条数
				prePage: 7,
				// 第几页
				page: 1,
				// 是否显示无数据
				nextPage: false
			};
		},
		onShow() {
			this.propertId = getStorages('userInfo').userInfo.community_id
			// 获取小区公告
			this.getNotice()
		},
		methods: {
			goToAnnounceDetails(id) {
				uni.navigateTo({
					url: '/property/announceDeta/index?id=' + id
				})
			},
	 
			// 小区公告
			getNotice() { 
				this.$mrequest2({
					url: 'Mini/property/notice',
					data: {
						property_id: this.propertId,
						pre_page: this.prePage,
						page: this.page
					}
				}).then(res => {
					if (res.code == 200) {
						this.noticeList.push(...res.data.data)
						this.nextPage = res.data.data.length < this.prePage
						console.log(this.noticeList)  
					}
				})
			}, 
		},
		onReachBottom(){
			if(!this.nextPage){
				this.page += 1
				this.getNotice()
			} 
		}
	}
</script>

<style lang="scss" scoped>
	.pro_announce {
		padding: 31rpx;

		.announce_item {
			margin-bottom: 20rpx;
			// height: 316rpx;
			border-bottom: 2rpx solid #E1E1E1;

			.ann_it_tit {
				display: block;
				height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.ann_it_con {
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}

			.ann_it_foo {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				height: 100rpx;
				line-height: 100rpx;

				.it_foo_fl {
					display: flex;
					width: 50%;

					image {
						margin: auto 0;
						margin-right: 20rpx;
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>
